<!--  -->
<template>
  <div class="salesOrder">
    <div class="screen">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="姓名">
          <el-input v-model="formInline.goodsname"></el-input>
        </el-form-item>
        <el-form-item label="所属组织">
          <el-select v-model="formInline.sumOrderDate" placeholder="请选择">
            <el-option
              v-for="item in orderType"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="汇总时间">
          <el-date-picker
            v-model="formInline.sumDate"
            type="date"
            placeholder="选择日期"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="订单日期">
          <el-date-picker
            v-model="formInline.sumOrderDate"
            type="date"
            placeholder="选择日期"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="商品类别">
          <el-select v-model="formInline.Commodity" placeholder="请选择">
            <el-option
              v-for="item in categories"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="el-tnl">
      <el-button type="primary" @click="addUser">新增用户</el-button>
    </div>
    <!-- 用户列表 -->
    <div class="accountList">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="name" label="名称" width="120"></el-table-column>
        <el-table-column label="用户名" width="120">
          <template slot-scope="scope">
            <el-button @click="AddorEdit(scope.row)" type="text" size="small">{{scope.row.userName}}</el-button>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="userName" label="用户名" width="120"></el-table-column> -->
        <el-table-column prop="phone" label="联系方式" width="120"></el-table-column>
        <el-table-column prop="topName" label="上级用户" width="120"></el-table-column>
        <el-table-column prop="clientName" label="所属组织" width="120"></el-table-column>
        <el-table-column prop="status" label="账号状态" width="120">
          <template slot-scope="scope">
            <span v-if="scope.row.status == 0">启用</span>
            <span v-if="scope.row.status == 1">禁用</span>
          </template>
        </el-table-column>
        <el-table-column prop="admin" label="是否管理员" width="120">
          <template slot-scope="scope">
            <span v-if="scope.row.admin == 0">否</span>
            <span v-if="scope.row.admin == 1">是</span>
          </template>
        </el-table-column>
        <el-table-column prop="roleName" label="角色名" width="120"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="auto"></el-table-column>
        <el-table-column fixed="right" label="操作" width="auto">
          <template slot-scope="scope">
            <el-button @click="changePassword(scope.row)" type="text" size="small">修改密码</el-button>
            <el-button
              @click="handleDisable(scope.row)"
              type="text"
              size="small"
            >{{scope.row.status==0?'禁用':'启用'}}</el-button>
            <el-button @click="handleDelete(scope.row,scope.$index)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- dialog -->
      <el-dialog title="修改密码" :visible.sync="dialogFormVisible" width="400px">
        <el-form :model="account" :rules="rules" ref="account">
          <el-form-item label="密码" :label-width="formLabelWidth" prop="password">
            <el-input v-model="account.password" autocomplete="off"></el-input>
          </el-form-item>
          <!-- <el-form-item label="确定密码" :label-width="formLabelWidth">
            <el-input v-model="account.determinePass" autocomplete="off"></el-input>
          </el-form-item>-->
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="determine">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
// 导入的其他文件 例如：import moduleName from 'modulePath';
import {
  userDelete,
  updatePass,
  userDisable,
  userList
} from "@/api/rightsManagement";
export default {
  //import所引入的组件注册
  components: {},

  data() {
    return {
      tableData: [],
      orderType: [],
      categories: [],
      rules: {
        password: [
          { required: true, message: "请输入你要修改密码", trigger: "blur" }
        ]
      },
      dialogFormVisible: false,
      formLabelWidth: "100px",
      account: {
        password: "",
        determinePass: "",
        id: "",
        password: "",
        oldPassword: ""
      },
      formInline: {
        goodsname: "",
        sumDate: "",
        sumOrderDate: ""
      },
      from: {
        address: "",
        supplierId: "",
        eliveryTime: ""
      }
    };
  },

  //监听属性
  computed: {},

  //监控data中的数据变化
  watch: {},

  //方法集合
  methods: {
    //删除组织
    handleDelete(row, $index) {
      this.$confirm("确定要删除吗?, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          userDelete(row.id).then(res => {
            this.tableData.splice($index, 1);
          });
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    addUser() {
      this.$router.push({
        path: "opiModel",
      });
    },
    AddorEdit(obj) {
      console.log(obj);
      this.$router.push({
        path: "opiModel",
        query: obj
      });
    },
    //修改密码
    changePassword(row) {
      this.dialogFormVisible = true;
      console.log(row);
      this.account.id = row.id;
      this.account.oldPassword = row.password;
    },
    determine() {
      let data = { id: this.account.id, password: this.account.password };
      this.$refs.account.validate(valid => {
        if (valid) {
          updatePass(data).then(res => {
            console.log(res);
            this.dialogFormVisible = false;
            if (res.code == 20000) {
              this.$message({ type: "success", message: res.msg });
            } else {
              this.$message({ type: "warning", message: res.msg });
            }
          });
        }
      });
    },
    //禁用
    handleDisable(row) {
      console.log(row);
      if (row.status == 0) {
        row.status = 1;
      } else {
        row.status = 0;
      }
      userDisable(row.id, row.status).then(res => {
        console.log(res);
        if (res.code == 20000) {
          this.$message({ type: "success", message: res.msg });
        } else {
          this.$message({ type: "success", message: res.msg });
        }
      });
    },

    accountList() {
      let data = {};
      userList(data).then(res => {
        console.log(res);
        // res.rows.map(item => {
        //   item.status = item.status == 0 ? "启用" : "禁用";
        //   item.admin = item.admin == 0 ? "是" : "否";
        //   return item;
        // });
        this.tableData = res.rows;
      });
    }
  },

  //创建完成 访问当前this实例
  created() {},
  //挂载完成 访问DOM元素
  mounted() {
    this.accountList();
  }
};
</script>
<style lang='scss'>
/* @import url(); 引入公共css类 */
.salesOrder {
  .screen {
    padding: 20px;
    font-family: "宋体";
    border-bottom: 20px solid #f4f4f5;
    .el-form-item__label {
      color: #606266;
      font-size: 14px;
      width: 100px;
    }
  }
  .el-tnl {
    padding: 10px 30px;
  }
  .accountList {
    padding: 20px;
  }
}
</style>